Angular Material এ রেডিও বাটন একটি জনপ্রিয় ইনপুট কম্পোনেন্ট, যা ব্যবহারকারীদের একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সাহায্য করে। mat-radio-button কম্পোনেন্ট ব্যবহার করে অ্যাঙ্গুলার অ্যাপ্লিকেশনে রেডিও বাটন তৈরি করা যায়। গ্রুপ করা রেডিও বাটন ব্যবহারকারীদের জন্য অনেকটা একটি নির্দিষ্ট সেট থেকে একটি অপশন নির্বাচন করার সুবিধা দেয়।

অ্যাঙ্গুলার ম্যাটেরিয়াল এর মাধ্যমে রেডিও বাটনগুলো গ্রুপ করা খুবই সহজ এবং এটি mat-radio-group এর মাধ্যমে করা হয়। এই গ্রুপের মধ্যে একাধিক রেডিও বাটন থাকতে পারে, তবে ব্যবহারকারী একসাথে একটির বেশি রেডিও বাটন সিলেক্ট করতে পারবে না।

রেডিও বাটন গ্রুপ করার জন্য প্রয়োজনীয় পদক্ষেপ

১. Angular Material এর রেডিও বাটন মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatRadioModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যায়।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

২. HTML এ রেডিও বাটন গ্রুপ তৈরি করা

mat-radio-group কম্পোনেন্ট ব্যবহার করে রেডিও বাটনগুলো গ্রুপ করা হয়। এর মধ্যে বিভিন্ন mat-radio-button উপাদান থাকবে এবং একবারে একটি রেডিও বাটন সিলেক্ট করা যাবে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে ngModel ব্যবহার করা হয়েছে, যা ব্যবহারকারী যে অপশনটি সিলেক্ট করবে, তার মান ধরে রাখে। এই ভ্যালুটা selectedValue নামে একটি প্রপার্টি হয়ে থাকবে, যা TypeScript ফাইলে ডিফাইন করা হবে।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা মডেল তৈরি করা

এখন, TypeScript ফাইলে selectedValue ডিফাইন করুন যা আপনার সিলেক্ট করা রেডিও বাটনের মান ধারণ করবে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button-example',
  templateUrl: './radio-button-example.component.html',
  styleUrls: ['./radio-button-example.component.css']
})
export class RadioButtonExampleComponent {
  selectedValue: string = 'option1';  // ডিফল্ট মান
}

এখন, selectedValue প্রপার্টি mat-radio-group এর মধ্যে সিলেক্ট করা অপশনের মান ধারণ করবে।

৪. রেডিও বাটন গ্রুপ স্টাইলিং (ঐচ্ছিক)

আপনি চাইলে CSS ব্যবহার করে রেডিও বাটনের স্টাইল কাস্টমাইজ করতে পারেন। এটি অ্যাপ্লিকেশনের ডিজাইন উন্নত করতে সাহায্য করবে।

mat-radio-button {
  margin-bottom: 10px;
}

রেডিও বাটন গ্রুপের অতিরিক্ত বৈশিষ্ট্য

• disabled: আপনি রেডিও বাটনগুলো ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেগুলো নির্বাচন করতে না পারে।

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2</mat-radio-button>
</mat-radio-group>

• name: একাধিক রেডিও বাটনের জন্য একে অপরকে গ্রুপ করার জন্য name অ্যাট্রিবিউট ব্যবহার করা যেতে পারে। এটি শুধুমাত্র একবারে একটি বিকল্প নির্বাচন করতে সহায়ক হবে।

<mat-radio-group name="group1" [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
</mat-radio-group>

• aria-label: অ্যাক্সেসিবিলিটি সুনিশ্চিত করতে aria-label ব্যবহার করতে পারেন, যাতে স্ক্রীন রিডার ব্যবহারকারীরা বুঝতে পারেন যে এটি একটি রেডিও বাটন গ্রুপ।

<mat-radio-group aria-label="Choose a color" [(ngModel)]="selectedColor">
  <mat-radio-button value="red">Red</mat-radio-button>
  <mat-radio-button value="green">Green</mat-radio-button>
  <mat-radio-button value="blue">Blue</mat-radio-button>
</mat-radio-group>

Angular Material এর রেডিও বাটন গ্রুপ ব্যবহার করা খুবই সহজ এবং এটি আপনাকে ইউজারের কাছ থেকে একটি নির্দিষ্ট পছন্দ নেওয়ার জন্য একটি সহজ উপায় দেয়। mat-radio-group এবং mat-radio-button কম্পোনেন্টের মাধ্যমে আপনি একাধিক রেডিও বাটনকে গ্রুপ করে একটি সেট থেকে একমাত্র একটি অপশন নির্বাচন করতে পারবেন। Angular এর ngModel ডিরেকটিভ ব্যবহার করে আপনি এই নির্বাচিত মানটি অ্যাপ্লিকেশনে ধারণ করতে পারবেন, যা অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহার করা যাবে।